<template>
  <div class="wrap-list">
    <!--搜索栏 start-->
    <el-row>
      <el-col :span="24" class="handle">
        <el-form :inline="true" :model="formInline" size="mini">
          <el-form-item label="任务名称">
            <el-input v-model="formInline.name" placeholder="任务名称" style="width: 200px;margin-right: 10px;"></el-input>
            <el-button icon="el-icon-search" type="primary" @click="onSubmit">查询</el-button>
            <el-button icon="el-icon-refresh" @click="onclickReset">重置</el-button>
            <el-button icon="el-icon-circle-plus-outline" type="success" @click="onclickAddData" >添加</el-button>
            <el-button icon="el-icon-delete" type="danger" @click="onclickDelete">批量删除</el-button>
            <el-button icon="el-icon-refresh" type="success" @click="refresh" >刷新</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!--搜索栏 end-->

    <!--列表 start-->
    <el-table
      class="table-height"
      v-loading="loading"
      ref="multipleTable"
      :data="taskList"
      tooltip-effect="dark"
      @selection-change="handleSelectionChange" :row-key="getRowKeys">
      <el-table-column type="selection" width="55" :reserve-selection="true" align="center"></el-table-column>
      <el-table-column label="序号" type="index" width="60"></el-table-column>
      <el-table-column label="任务名称" prop="taskName"> </el-table-column>
      <el-table-column label="创建时间" prop="createTime">
        <template slot-scope="scope">{{ scope.row.createTime | formatDate }}</template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template slot-scope="scope">
          <el-button class="xq" @click="detail(scope.row, 2)" type="text" size="small">
            <el-tooltip class="item" effect="dark" content="详情" placement="bottom"><i class="el-icon-view"></i></el-tooltip></el-button>
          <el-button class="xg" @click="detail(scope.row, 1)" type="text" size="small">
            <el-tooltip class="item" effect="dark" content="修改" placement="bottom"><i class="el-icon-edit"></i></el-tooltip></el-button>
          <el-button class="xg" @click="oneDelete(scope.row)" type="text" size="small">
            <el-tooltip class="item" effect="dark" content="删除" placement="bottom"><i class="el-icon-delete"></i></el-tooltip></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--列表 end-->

    <!--分页 start-->
    <div class="pager">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="taskData.pageNum"
        :page-sizes="[10,20,30,50]"
        :page-size="taskData.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
    <!--分页 end-->

    <!--增加数据弹窗 start-->
    <add-or-update-task v-if="addDialog" :dialog="addDialog" @saveUpdateCall="saveUpdateCall" :type="type" :detail="detailInterface" @closeCall="closeCall"></add-or-update-task>
    <!--增加弹窗 end-->

  </div>
</template>
<script>
  import InterfaceConfig from './InterfaceConfig'
  import AddOrUpdateTask from './AddOrUpdateTask'
  import { formatDateTime } from "@/libs/utils"

  export default {
    components: {
      InterfaceConfig, AddOrUpdateTask
    },
    filters: {
      formatDate(time) {
        return formatDateTime(new Date(time), 'yyyy-MM-dd hh:mm:ss');
      }
    },
    data () {
      return {
        addDialog: false,
        type: 0,
        loading: true,
        formInline: {
          name: '',
        },
        taskList: [],
        taskData: {
          taskName: '',
          pageNum: 1,
          pageSize: 10
        },
        total: 0,
        isDisabled: false,
        detailInterface: {},
        multipleSelection: [],
      }
    },
    created(){
      this.onLoadListData()
    },
    methods:{
      /**单条删除**/
      oneDelete(data) {
        console.log(data);
        this.$confirm('此操作将永久删除数据, 是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$http.delete('/task/delete', {data: [data.taskId]})
            .then(res => {
              for (let j = 0; j < this.taskList.length; j++) {
                if (this.taskList[j].taskId == data.taskId) {
                  this.taskList.splice(j, 1);
                  break;
                }
              }
              this.$message({type: 'success', message: '删除成功!'});
              this.$refs.multipleTable.clearSelection();
            })
        })
      },
      /**分页Key值**/
      getRowKeys(row) {
        return row.taskId;
      },
      /**重置**/
      onclickReset() {
        this.formInline.name = '';
        this.taskData.taskName = '';
        this.onLoadListData();
      },
      /**搜索**/
      onSubmit() {
        this.taskList = []
        this.taskData.taskName = this.formInline.name
        this.onLoadListData();
      },
      /**展示数据列表**/
      onLoadListData() {
        this.$http.get('/task/page', {
          params: {
            pageSize: this.taskData.pageSize,
            pageNum: this.taskData.pageNum,
            taskName: this.taskData.taskName
          }
        }).then(res => {
          let resData = res.list;
          this.total = res.total;
          this.taskList = resData;
          setTimeout(() => {
            this.loading = false
          }, 500)
        }).catch(() => {
          this.loading = false
        })
      },
      /**关闭添加弹窗回调**/
      closeCall() {
        this.addDialog = false;
        //清空已选修改对象
        this.detailInterface = {};
        //清空vuex
        this.$store.commit("nodeList", []);
        this.refresh();
      },
      /**刷新**/
      refresh () {
        this.loading = true;
        this.taskData.pageNum = 1;
        this.onLoadListData();
      },
      /**改变显示条数**/
      handleSizeChange(val) {
        this.taskData.pageSize = val
        this.taskList = []
        this.onLoadListData()
      },
      /**改变页数**/
      handleCurrentChange(val) {
        this.taskData.pageNum = val
        this.taskList = []
        this.onLoadListData()
      },
      /** 保存修改后的回调**/
      saveUpdateCall(data){
        this.addDialog=data
        this.onLoadListData()
      },
      /**详情、修改**/
      detail (data, type) {
        this.$http.get(`/task/${data.taskId}`).then(res => {
          this.detailInterface = res;
          this.addDialog = true;
          this.type = type;
        })
      },
      /**点击添加按钮**/
      onclickAddData() {
        this.addDialog = true;
        this.type = 0;
      },
      /**批量删除**/
      onclickDelete() {
        if (this.multipleSelection.length > 0) {
          this.$confirm('此操作将永久删除数据, 是否删除?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            let deleteArr = this.multipleSelection
            let taskIds = [];
            for (let i = 0; i < deleteArr.length; i++) {
              taskIds.push(deleteArr[i].taskId)
            }
            this.$http.delete('/task/delete', {data: taskIds})
              .then(res => {
                let tData = this.taskList
                for (let j = 0; j < taskIds.length; j++) {
                  for (let k = 0; k < tData.length; k++) {
                    if (tData[k].taskId == taskIds[j]) {
                      this.taskList.splice(k, 1)
                      break;
                    }
                  }
                }
                this.$message({type: 'success', message: '删除成功!'});
                this.$refs.multipleTable.clearSelection();
              })
          }).catch(() => { });
        } else {
          this.$message({ message: '请选择删除项', type: 'warning'});
        }
      },
      /**监听选择table**/
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
    }
  }
</script>
<style scoped lang="less">
  .wrap-list{
    height: 100%;
    position: relative;
    .handle{
      /*border-bottom: 10px solid #e2eaed;*/
    }
    .table-height{
      height: calc(100% - 47px - 47px);
    }
    .pager{
      position: absolute;
      width: 100%;
      bottom: 0;
    }
  }
</style>
